<template>
  <div>
    <!-- 课程管理 -->
    <!-- 按钮上面的导航 -->
    <!-- <el-row style="margin: 18px 0px 0px 18px "> -->
    <el-row>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/admin/dashboard' }">管理中心</el-breadcrumb-item>
        <el-breadcrumb-item>课程管理</el-breadcrumb-item>
        <el-breadcrumb-item>课程列表</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>

    <!-- 发起订单弹窗 -->
    <el-dialog
      title="课程详情"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span style="font-size:25px;">课程：{{this.coursedialog.courseName}}</span><br>
      <span style="font-size:25px;">价格：{{this.coursedialog.courseTuition}}(元)</span><br>
      <span style="font-size:25px;">老师：{{this.coursedialog.teacher}}</span><br>
      <br>
      <br>
      <br>
      <br>
      <el-steps :active="0" align-center>
        <el-step title="步骤1" description="发起订单"></el-step>
        <el-step title="步骤2" description="支付订单"></el-step>
        <el-step title="步骤3" description="购买成功"></el-step>
      </el-steps>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="alipay()">确 定 购 买</el-button>
      </span>
    </el-dialog>

    <!-- 搜索与添加按钮 -->
    <div style="margin-top: 15px; margin-left: 12px;">
        <div v-permission="'courserDisplaySearch'">
          <el-select v-model="queryKey3" style="width: 150px;float:left;"  slot="prepend" placeholder="请选择启用状态">
            <el-option label="" value=""></el-option>
            <el-option label="启用状态" value="1"></el-option>
            <el-option label="禁用状态" value="0"></el-option>
          </el-select>
        </div>
      <el-input
        style="width: 250px;float:left;"
        placeholder="请输入课程名称"
        suffix-icon="el-icon-date"
        v-model="queryKey1"
        clearable
      ></el-input>
      <el-input
        placeholder="请输入开课老师"
        v-model="queryKey2"
        style="width: 250px;float:left;"
        clearable
      >
      </el-input>
       <el-button style="float:left;" type="primary" @click="loadCourse()" icon="el-icon-search">搜索</el-button>
       <el-button style="float:left;" type="primary" icon="el-icon-refresh" @click="loadCourse1()" >刷新</el-button>
       <el-button type="primary" style="float:left;padding-left:20px" @click="goMyCourse()">我的课程</el-button>
    </div>

    <!-- 引入的添加/修改组件  组件名叫BannerCreate  就用 banner-creat -->
    <div v-permission="'courserAddButton'">
     <course-add @onSubmit="loadCourse()" ref="edit"></course-add>
    </div>
    
    <el-card style="margin: 15px 1%;width: 98%">
      <el-table :data="data" border style="width: 100%" :max-height="tableHeight">

          <!-- 表单下拉  css 在下面 -->
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="课时/节">
                  <span>：{{ props.row.courseHour }}</span>
                </el-form-item>
                <el-form-item label="人数">
                  <span>：{{ props.row.num }}</span>
                </el-form-item>
                <el-form-item label="课程描述">
                  <span>：{{ props.row.courseDesc }}</span>
                </el-form-item>
                <el-form-item label="创建时间">
                  <span>：{{ props.row.createTime }}</span>
                </el-form-item>
                <el-form-item label="上课时间">
                  <span>：{{ props.row.courseTime }}</span>
                </el-form-item>
                 <el-form-item label="最后操作人">
                  <span>：{{ props.row.username }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>

        <el-table-column prop="courseName"  label="课程名称" fit></el-table-column>
        <el-table-column prop="courseTuition" label="课程学费（元）"   fit></el-table-column>
        <el-table-column prop="ptTuition" label="拼团价格（元）"  fit></el-table-column>
        <el-table-column prop="teacher" label="开课老师" width="110" fit></el-table-column>
        <el-table-column label="图片" width="170" fit>
          <template slot-scope="scope">
            <el-image @click="openDialog(scope.row)" style="width: 150px; height: 100px" :src="scope.row.imageUrl"></el-image>
          </template>
        </el-table-column>

        <el-table-column label="视频"  width="120" fit>
          <template slot-scope="scope">
            <el-link type="primary" @click="openDialog(scope.row)">公开课教学视频</el-link>
          </template>
        </el-table-column>

        <div v-if='courserDisplayButtonStatus'>
          <el-table-column label="启用" width="65">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.display"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="(value) => commitStatusChange(value, scope.row, scope.row.display)"
              ></el-switch>
            </template>
          </el-table-column>
        </div>

        <el-table-column label="购买"  style="display:flex;justify-content:center;align-items:center;" fit>
          <template slot-scope="scope" >
             <!-- ali支付  @click="alipay(scope.row.id)"-->
             <el-button
             style="color:#47E4AC;"
              @click="opendialogVisible(scope.row)"
              size="small" round
              icon="el-icon-shopping-cart-1"
            >单独购买</el-button>
            <!-- 发起拼团 -->
             <el-button
             style="margin-left:0;margin-top:5px;color:#BB33FD;"
              @click="openPt(scope.row.id,scope.row.courseId)"
              size="small" round
              icon="el-icon-shopping-cart-1"
            >查看3人拼团</el-button>
          </template>
        </el-table-column>

        <div v-if='courserEditDelButtonStatus'>
          <el-table-column fixed="right" label="操作" width="120" >
            <template slot-scope="scope">
              <el-button
                @click="editCourse(scope.row)"
                type="primary"
                size="small"
                icon="el-icon-edit"
                circle
              ></el-button>

              <el-button
                @click="deleteCourse(scope.row.id)"
                type="danger"
                size="small"
                icon="el-icon-delete"
                circle
              ></el-button>

              <el-button
             style="margin-left:0;margin-top:5px;color:#BB33FD;"
              @click="openCourseByUser(scope.row.courseId)"
              size="small" round
              icon="el-icon-shopping-cart-1"
            >报名情况</el-button>
            </template>
          </el-table-column>
        </div>
      </el-table>
      <div style="margin: 20px 0 50px 0">
        <el-pagination
          background
          style="float:right;"
          layout="total, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          :page-size="pageSize"
          :total="total"
        ></el-pagination>
      </div>
    <!-- 引入弹窗组件 -->
    <course-dialog  ref="dialog1"></course-dialog>
    </el-card>
  </div>
</template>

<script>
import CourseAdd from './CourseAdd'
import CourseDialog from '../../courseIndex/CourseDialog'

export default {
  name: 'Course',
  // 引入之后 使用 banner-create 进行使用
  components: { CourseAdd, CourseDialog },
  data () {
    return {
      data: [],
      queryKey1: '',
      queryKey2: '',
      queryKey3: '',
      pageSize: 10,
      total: 0,
      dialogVisible: false, // 弹窗的关闭
      coursedialog: '', // 弹窗的数据
      buttonMeuns: [], // 按钮权限List
      courserDisplayButtonStatus: false,
      courserEditDelButtonStatus: false
    }
  },
  mounted () {
    this.loadCourse()
    this.loadMeun()
  },
  computed: {
    tableHeight () {
      // table  card的高度
      return window.innerHeight - 300
    }
  },
  methods: {
    alipay () {
      // 生成订单
      var id = this.coursedialog.id
      this.$axios.post('admin/orderadd/' + id + '/0').then((resp) => {
        if (resp && resp.data.code === 200) {
          this.dialogVisible = false
          // 从后端返回信息
          this.$alert(resp.data.message, '提示', {
            type: 'success',
            dangerouslyUseHTMLString: true
          })
        } else {
           // 从后端返回错误信息
              this.$alert(resp.data.message, '错误提示', {
                type: 'error',
                dangerouslyUseHTMLString: true
              })
        }
      })
    },
    loadCourse1 () {
       // 刷新清空搜索框的值
      // eslint-disable-next-line no-unused-expressions
      this.queryKey1 = ''
      this.queryKey2 = ''
      this.queryKey3 = ''
      this.loadCourse()
    },
    loadCourse () {
      var _this = this
      this.$axios.post('/course/' + this.pageSize + '/1?queryKey1=' + this.queryKey1 + '&queryKey2=' + this.queryKey2 + '&queryKey3=' + this.queryKey3).then(resp => {
        if (resp && resp.data.code === 200) {
          _this.data = resp.data.result.content
          _this.total = resp.data.result.totalElements
          this.$message({
            type: 'success',
            message: '刷新成功'
          })
        } else {
          // 从后端返回错误信息
            this.$alert('<p style=" color:#F00;">' + resp.data.message + '</p>', '错误提示', {
              dangerouslyUseHTMLString: true
            })
        }
      })
    },
    handleCurrentChange (page) {
      var _this = this
      this.$axios.post('/course/' + this.pageSize + '/' + page + '?queryKey1=' + this.queryKey1 + '&queryKey2=' + this.queryKey2 + '&queryKey3=' + this.queryKey3).then(resp => {
        if (resp && resp.data.code === 200) {
          _this.data = resp.data.result.content
          _this.total = resp.data.result.totalElements
        } else {
              // 从后端返回错误信息
              this.$alert(resp.data.message, '错误提示', {
              type: 'error',
              dangerouslyUseHTMLString: true
              })
        }
      })
    },
    commitStatusChange (value, data, oldvalue) {
      this.$axios
        .put('/admin/course/status', {
          display: value,
          id: data.id
        })
        .then((resp) => {
          if (resp && resp.data.code === 200) {
            if (value) {
              this.$message('已启用 ')
            } else {
              this.$message('已禁用 ')
            }
          } else {
              // 从后端返回错误信息
              this.$alert(resp.data.message, '错误提示', {
                type: 'error',
                dangerouslyUseHTMLString: true
              })
              data.display = true
          }
        })
    },
    editCourse (item) {
      this.$refs.edit.dialogFormVisible = true
      this.$refs.edit.form = {
        id: item.id,
        courseId: item.courseId,
        courseName: item.courseName,
        courseHour: item.courseHour,
        createTime: item.createTime,
        num: item.num,
        courseTime: item.courseTime,
        courseTuition: item.courseTuition,
        ptTuition: item.ptTuition,
        courseType: item.courseType,
        teacher: item.teacher,
        courseDesc: item.courseDesc,
        imageUrl: item.imageUrl,
        videoUrl: item.videoUrl
      }
    },
    deleteCourse (id) {
      this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$axios.delete('/admin/content/course/' + id).then((resp) => {
            if (resp && resp.data.code === 200) {
              this.$message({
                message: resp.data.message,
                type: 'success'
              })
              this.loadCourse()
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    toUrl (url) {
          // window.location.href = url  // 本窗口打开外链接
          window.open(url, '_blank') // 新窗口打开外链接
      },
      openPt (id, courseId) { // 前往拼团页面
        this.$router.push({ name: 'PtIndex', params: { id: id, courseId: courseId } })
      },
      openCourseByUser (courseId) { // 前往拼团页面
        this.$router.push({ name: 'CourseByUser', params: { courseId: courseId } })
      },
      goMyCourse(){
        this.$router.push({ path: '/admin/course/MyCourse' })
      },
      openDialog (item) {
        this.$refs.dialog1.data = {
          id: item.id,
          courseName: item.courseName,
          courseHour: item.courseHour,
          num: item.num,
          courseTime: item.courseTime,
          courseTuition: item.courseTuition,
          ptTuition: item.ptTuition,
          courseType: item.courseType,
          teacher: item.teacher,
          courseDesc: item.courseDesc,
          imageUrl: item.imageUrl,
          videoUrl: item.videoUrl
        }
        this.$refs.dialog1.dialogTableVisible = true
      },
      opendialogVisible (course) {
        this.dialogVisible = true
        this.coursedialog = course
      },
       // 弹窗组件
      handleClose (done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done()
          })
          .catch(_ => {})
      },
      loadMeun(){
        this.buttonMeuns = this.$store.state.adminButtonMenus
        // indexOf查询到的数据位置，大于-1表示存在该数据
        if(this.buttonMeuns.indexOf("courserDisplayButton") > -1){
          this.courserDisplayButtonStatus = true
        }
        if(this.buttonMeuns.indexOf('courserEditDelButton') > -1){
          this.courserEditDelButtonStatus = true
        }
      }
  }
}
</script>

<style scoped>
.add-link {
  margin: 18px 0 15px 10px;
  float: left;
}
.demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
